
<script type="text/javascript">

$(function($) {
		
		var regs = <?php echo isset($reg_stats['stats_regs']) ? $reg_stats['stats_regs'] : 0; ?>;
                var actives = <?php echo isset($reg_stats['stats_actives']) ? $reg_stats['stats_actives'] : 0; ?>;
                
		$.plot($('#reg_stat_analytics'), [{ label: 'Registration', data: regs },{ label: 'Activated', data: actives }], {
			lines: { show: true },
			points: { show: true },
			grid: { hoverable: true, backgroundColor: '#fefefe' },
			series: {
				lines: { show: true, lineWidth: 1 },
				shadowSize: 0
			},
			xaxis: { mode: "time" },
			yaxis: { min: 0},
			selection: { mode: "x" }
		});
                
		function showTooltip(x, y, contents) {
			$('<div id="tooltip">' + contents + '</div>').css( {
				position: 'absolute',
				display: 'none',
				top: y + 5,
				left: x + 5,
				'border-radius': '3px',
				'-moz-border-radius': '3px',
				'-webkit-border-radius': '3px',
				padding: '3px 8px 3px 8px',
				color: '#ffffff',
				background: '#000000',
				opacity: 0.80
			}).appendTo("body").fadeIn(500);
		}
                
                var previousPoint = null;
                
		$("#reg_stat_analytics").bind("plothover", function (event, pos, item) {
			$("#x").text(pos.x.toFixed(2));
			$("#y").text(pos.y.toFixed(2));
	 
				if (item) {
					if (previousPoint != item.dataIndex) {
						previousPoint = item.dataIndex;
						
						$("#tooltip").remove();
						var x = item.datapoint[0],
							y = item.datapoint[1];
						
						showTooltip(item.pageX, item.pageY,
									item.series.label + " : " + y);
					}
				}
				else {
					$("#tooltip").fadeOut(500);
					previousPoint = null;            
				}
		});
	
	});
</script>

	
<div id="analyticsWrapper" style="width:95%;">
	<div id="reg_stat_analytics" style="width:100%;height: 300px;float: left"></div>
</div>

<style>
#reg_stat_analytics .legend {
    display: none;
}
</style>
<!-- End Analytics -->